<template>
  <div class="contain">
      <!-- 异常信息标题 -->
      <div class="title">{{title}}</div>
      <!-- 异常信息的详情列表 -->
      <div class="list">
        <mt-loadmore
         :top-method="loadTop" 
         :bottom-method="loadBottom" 
         :bottom-all-loaded="allLoaded" 
         ref="mt"
          :auto-fill="false"
          >
          <el-row>
            <el-col :span="24" v-for="(item) in tableData" :key="item.id" style="padding:10px;">
              <el-card :body-style="{ padding: '0px' }">
                <div class="detail">
                  <div>
                    <p>{{item.Detail}}</p>
                    <p class="time">{{item.Time}}</p>
                  </div>
                  <p class="suggest">{{item.ManageSuggest}}</p>
                </div>
                <img src="../assets/img/door.jpg" class="image" style="width:100%;">
              </el-card>
            </el-col>
          </el-row>
        </mt-loadmore>
      </div>
    </div>
</template>
<script>
import { mapMutations } from "vuex";
export default {
  name: "warehouse",
  data() {
    return {
      title: "库房异常",
      tableData: [],
      currentPage: 1,
      pageSize: 10,
      allLoaded: false
    };
  },
  methods: {
    // 影射方法调用为,store.commit
    ...mapMutations(["clearMesNumber"]),
    myAjax(type) {
      var that = this;
      var url = api + "/api/Warehouse/GetWarehouses";
      switch (type) {
        case "top":
          that.currentPage = 1;
          break;
        case "bottom":
          that.currentPage += 1;
          break;
      }
      $.ajax({
        type: "GET",
        url: url,
        dataType: "json",
        /*  xhrFields: {
            withCredentials: true
         },
         crossDomain: true, */
        data: {
          p: that.currentPage,
          size: that.pageSize,
          token:JSON.parse(localStorage.getItem("token"))
        },
        success: function(result) {
          console.log("档案出入库：", result);
          if(result.state == -1){
            alert(result.message)
           that.$router.push("/login");
          }else{
              // 请求成功展示列表
          switch (type) {
            case "top":
            //  隐藏上拉加载的内容
              that.$refs.mt.onTopLoaded();
              that.tableData = result;
              // 上拉刷新以后设置异常消息数量为0
               that.clearMesNumber("warehouse");
              break;

            case "bottom":
            // 隐藏下拉刷新的内容
              that.$refs.mt.onBottomLoaded();
              if (result.length == 0) {
                 //  如果无数据，禁止下拉刷新
                this.allLoaded = true;
              } else {
                that.tableData.push(...result);
              }

              break;
          }

          }
        
        },
        error: function(error) {
          // 请求失败提示信息
          alert("系统异常");
        }
      });
    },
    loadTop(id) {
      console.log("this.pageSize:", this.currentPage);
      this.myAjax("top");
    },
    loadBottom() {
      this.myAjax("bottom");
    }
  },
  created() {
    this.myAjax("top");
  },
  mounted() {
    // 页面打开更改当前异常类型的数量为0
    this.clearMesNumber("warehouse");
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style scoped lang="scss">
  // background: #fff;
  .detail {
    display: flex;
    padding: 10px;
    & > div {
      width: 70%;
      .time {
        color: rgb(255, 146, 127);
      }
    }
    & > p {
      width: 30%;
      color: springgreen;
      text-align: right;
      @media screen and (max-width: 375px) {
        font-size: 12px;
      }
    }
  }

.img {
  width: 100%;
  height: 100%;
  p {
    width: 100%;
    height: 50px;
    text-align: center;
    font-size: 30px;
    margin-top: 30px;
    color: salmon;
    font-style: italic;
  }
  img {
    margin-top: 30px;
    width: 100%;
  }
}
</style>
